<!--
网页布局准则
    1）标准流：控制块级元素纵向排列
    2）浮动：控制块级元素横向排列

重点1：浮动搭配标准流父盒子
    约束浮动位置：利用标准流父元素实现约束。
    拓展的准则
        标准流父元素控制纵向排列
        之后内部子元素利用浮动控制横向排列
重点2：全浮、全不浮动，二选一
    一个容器中的所有子元素，要么全部浮动，要么都不浮动，否则布局容易出现脱标问题！


浮动盒子只影响浮动盒子后面的标准流块元素，浮动元素会压着标准流块元素；
浮动盒子不会影响前面的标准流块元素，因为它只会顶着标准流块元素的下边缘浮动。
    -----------------
    浮动盒子1
    标准流块元素盒子2
    浮动盒子3
    -----------------
结果是：
    1会顶着父容器浮动，
    2会占用1的位置，使得1浮起来压着2，
    3会在2的下边缘那里浮动。


浮动
    浮动可以改变标签元素默认的排列方式，例如将【块级元素】在一行内显示。
    float
        - none
        - left
        - right
    创建浮动框，
        并移动到父容器的（左或右）边缘，依次排列成一行，
        或者紧挨到另一个浮动框的（左或右）边缘，依次排成一行，
        或者移动到标准流块元素的边缘（下边缘），依次排成一行，
        若一行挤不下，就会自动换行。
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: cyan;
    }
    .box div {
        float: left;
        background: red;
    }
    .box div:nth-child(2) {
        float: right;
    }
</style>

<div class="box">
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
</div>